<template>
  <div class="article page page_padding">
    <NavigateBar :forwardOnClick="commit" :forwardText="'发表'" :forwardIcon="'ri-check-line'" />
    <input type="text" class="title" v-model="title" placeholder="标题" />
    <textarea class="content" placeholder="内容" v-model="content" rows="20" />
  </div>
</template>

<script>
import { reactive, toRefs } from "vue"
import { useRouter } from "vue-router";
import { apis, tipsPromiseHandler } from "../api"
import NavigateBar from "../components/NavigateBar.vue"

export default {
  setup() {
    const router = useRouter()
    const data = reactive({
      title: "",
      content: ""
    });

    const commit = () => {
      if (data.title != '' && data.content != '') {
        let promise = apis.saveArticle(data.title, data.content)
        tipsPromiseHandler(promise, () => {
          router.push("/article")
        })
      }
    }
    return { ...toRefs(data), commit };
  },
  components: { NavigateBar }
}
</script>

<style lang="less" scoped>
.article {
  padding-top: 40px;
  color: white;

  & .title {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 16px 40px;
    font-size: 26px;
    outline: none;
    border: none;
    font-weight: 500;
    letter-spacing: 2px;
  }

  & .content {
    color: white;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 40px;
    font-size: 18px;
    outline: none;
    border: none;
    line-height: 36px;
    font-weight: 500;
    letter-spacing: 2px;
  }
}
</style>